<template>
	<view class="agent-page">
		<u-navbar title="系统代理" :placeholder="true" bgColor="rgba(0,0,0,0.0)" :autoBack="true">
		</u-navbar>
		<view class="grade">
			<image v-if="statistics.agent_ids == '2,1'||statistics.agent_ids == '1,2'"
				src="https://m.lqvvvv.com/assets/static/my/agent-bg.png" mode=""></image>
			<image v-if="statistics.agent_ids == '3'" src="https://m.lqvvvv.com/images/agent/dlbg-3.png" mode="">
			</image>
			<image v-if="statistics.agent_ids == '2'" src="https://m.lqvvvv.com/images/agent/dlbg-2.png" mode="">
			</image>
			<image v-if="statistics.agent_ids == '1'" src="https://m.lqvvvv.com/images/agent/dlbg-1.png" mode="">
			</image>
			<view class="grade-cont">
				<view class="grade-title">
					代理等级
				</view>
				<view class="grade-box">
					<image src="https://m.lqvvvv.com/assets/static/my/agent-icon.png" mode=""></image>
					<view class="senior">
						<view class="left-title bg1" v-if="statistics.agent_ids == '1'">
							经纪人
						</view>
						<view class="left-title bg2" v-if="statistics.agent_ids == '2'">
							经销商
						</view>
						<view class="left-title bg3" v-if="statistics.agent_ids == '3'">
							城市分公司
						</view>
						<view class="left-title" v-if="statistics.agent_ids == '2,1'||statistics.agent_ids == '1,2'">
							经销商 | 经纪人
						</view>
						<view class="time" v-if="statistics.agent_endtime">
							{{$u.timeFormat(statistics.agent_endtime, 'yyyy-mm-dd  hh:MM:ss')}} 到期
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			功能列表
		</view>
		<view class="record">
			<view class="num-box">
				<!-- 				<view class="num-item">
					<view>
						<image src="https://m.lqvvvv.com/assets/static/my/funicon1.png" mode=""></image>
					</view>
					<view class="num-title">
						代理升级
					</view>
				</view> -->
				<view class="num-item" @click="goopen">
					<view class="num">
						<image src="https://m.lqvvvv.com/assets/static/my/funicon2.png" mode=""></image>
					</view>
					<view class="num-title">
						我的邀请链接
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			数据统计
		</view>
		<view class="record">
			<view class="num-box">
				<view class="num-item">
					<view>
						{{info.next_total || 0}}
					</view>
					<view class="num-mintitle">
						下级账号
					</view>
				</view>
				<view class="num-item">
					<view class="num">
						{{info.total_profit || 0}}
					</view>
					<view class="num-mintitle">
						抽成收益
					</view>
				</view>
				<view class="num-item">
					<view>
						{{statistics.order_ratio || 0}}%
					</view>
					<view class="num-mintitle">
						抽成比例
					</view>
				</view>
			</view>
		</view>

		<view class="account">
			<view class="tabs-box">
				<view class="tabs-item" @click="goselse(index)" :class="item.isshow == true?'selse':''"
					v-for="(item,index) in tabs" :key="index">{{item.name}}</view>
			</view>
			<view class="account-title">
				<view>
					账号统计
				</view>
				<view class="account-right">
					<view class="right-item">
						陪玩收益
					</view>
					<view class="right-item">
						线下收益
					</view>
				</view>
			</view>
			<view class="below-account">
				<view class="below-item" v-for="(item,index) in list" :key="index">
					<view class="below-left" v-if="item.avatar">
						<image class="head"
							:src="item.avatar.startsWith('http') ? item.avatar : 'https://m.lqvvvv.com' + item.avatar || 'https://m.lqvvvv.com/assets/static/index/head.png'"
							mode="aspectFill"></image>
						<view class="head-info">
							<view class="nickname">
								{{item.nickname}}
							</view>
							<view class="head_id">
								{{item.id}}
							</view>
						</view>
					</view>
					<view class="below-right" v-if="item.play_profit">
						<view class="below-num" v-if="item.play_profit>0">
							+{{item.play_profit}}
						</view>
						<view class="below-num" v-else>
							{{item.play_profit}}
						</view>
						<view class="below-num" v-if="item.friend_profit>0">
							+{{item.friend_profit}}
						</view>
						<view class="below-num" v-else>
							{{item.friend_profit}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statistics: {},
				page: 1,
				list: [],
				status: 'loading',
				info: {},
				tabs: [],
				maxlist: []
			}
		},
		onLoad() {
			this.getSubordinateList()
			this.getUserAgent()
			this.getProfit()
		},
		onReachBottom() {
			this.page = this.page + 1
			this.status = 'loading';
			this.getSubordinateList()
		},
		methods: {
			goselse(index) {
				this.tabs.map(item => {
					item.isshow = false
				})
				this.tabs[index].isshow = true
				if (index == 0) {
					this.list = this.maxlist.users
				}
				if (index == 1) {
					this.list = this.maxlist.friend
				}
				if (index == 2) {
					this.list = this.maxlist.dealer
				}
				if (index == 3) {
					this.list = this.maxlist.broker
				}
			},
			getProfit() {
				this.$Request({
					method: 'POST',
					url: '/api/user_agent/getProfit',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.info = res.data
					}
				})
			},
			goopen() {
				let app = this
				uni.showModal({
					title: '邀请链接',
					content:'https://m.lqvvvv.com/invite/#/pages/index/index?code='+ app.statistics.invite_code,
					confirmText: '复制',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.setClipboardData({
								data: 'https://m.lqvvvv.com/invite/#/pages/index/index?code='+ app.statistics.invite_code,
								success: function() {
									uni.showToast({
										title: '复制成功！',
										icon: 'none'
									})
								}
							});

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getSubordinateList() {
				let params = {
					page: this.page,
					limit: 10
				}
				this.$Request({
					method: 'POST',
					url: '/api/user_agent/myNextList',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.maxlist = res.data
						this.list = this.maxlist.users
						console.log(this.list, 1111111111111)
					}
				})
			},
			getUserAgent() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getUserAgent',
					data: {},
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.statistics = res.data
						if (this.statistics.agent_ids == '1' || this.statistics.agent_ids == '2' || this.statistics
							.agent_ids == '1,2' || this.statistics.agent_ids == '2,1') {
							this.tabs = [{
									name: '下级客户',
									isshow: true
								},
								{
									name: '下级达人',
									isshow: false
								}
							]
						} else {
							this.tabs = [{
									name: '下级客户',
									isshow: true
								},
								{
									name: '下级达人',
									isshow: false
								},
								{
									name: '经纪人',
									isshow: false
								},
								{
									name: '经销商',
									isshow: false
								}
							]
						}
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style scoped lang="scss">
	.agent-page {
		padding: 30rpx;

		.grade {
			position: relative;
			height: 305rpx;

			image {
				width: 100%;
				height: 305rpx;
			}

			.grade-cont {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				padding: 50rpx 20rpx 0 20rpx;

				.grade-title {
					padding: 0 20rpx;
					font-weight: bold;
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.grade-box {
					display: flex;
					align-items: center;
					padding: 30rpx;
					background-color: #fff;
					border-radius: 20rpx;
					margin-top: 30rpx;

					image {
						width: 123rpx;
						height: 92rpx;
					}

					.senior {
						margin-left: 20rpx;

						.left-title {
							font-size: 32rpx;
							font-weight: 700;
							color: #333333
						}

						.time {
							font-size: 24rpx;
							color: #999999;
							margin-top: 20rpx;
						}
					}
				}
			}
		}

		.title {
			padding: 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
			color: #333333;
		}

		.record {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 0;

			.num-box {
				display: flex;
				text-align: center;

				.num-item {
					width: 33%;
					text-align: center;
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;

					image {
						width: 88rpx;
						height: 92rpx;
					}

					.num {
						color: #FF7C3B;
					}

					.num-title {
						margin-top: 15rpx;
						color: #000;
						font-size: 24rpx;
					}

					.num-mintitle {
						margin-top: 15rpx;
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}

		.account {
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding-bottom: 30rpx;

			.tabs-box {
				padding: 30rpx 30rpx 0 30rpx;
				display: flex;
				align-items: center;

				.tabs-item {
					font-size: 26rpx;
					color: #2E314A;
					margin-right: 20rpx;
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
				}

				.selse {
					background: #E6F3FF;

				}
			}

			.account-title {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				border-bottom: 1rpx solid #eee;

				.account-right {
					width: 40%;
					display: flex;
					align-items: center;

					.right-item {
						width: 50%;
						text-align: center;
					}
				}
			}

			.below-account {
				padding: 30rpx 30rpx 0 30rpx;

				.below-item {
					margin-bottom: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.below-left {
						display: flex;
						align-items: center;

						.head {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}

						.head-info {
							margin-left: 20rpx;

							.nickname {
								font-size: 26rpx;
								color: #333333;
								font-weight: 700;
							}

							.head_id {
								margin-top: 5rpx;
								font-size: 24rpx;
								color: #999999;
							}
						}
					}

					.below-right {
						width: 40%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #333333;
						font-size: 26rpx;
						font-weight: 700;

						.below-num {
							width: 50%;
							text-align: center;
							color: #FF7C3B;
						}
					}
				}
			}
		}
	}
</style>